<template>
	<div class="flex_column">
		<div class="flex_row flex_1" style="height: 100%;">
			<div class="section main" style="width: 12%;margin-right:0;">
				<!-- <div class="group_box" v-for="(item,idx) in groupList" :key="idx">{{item.name}}</div> -->
				<div class="group_box">
					<div v-for="(item, index) in indicatorGroupList" :key="index" class="list_l"
						:class="activeIndex == index ? 'choice' : ''" @click="chenked(item, index)">
						<span class="name">{{ item.indicatorGroupName }}</span>
					</div>
				</div>
			</div>
			<div class="flex_column flex_1" style="width: 88%">
				<search-section v-enter-search="() => { operate('search') }">
					<!-- 搜索查询 -->
					<div>
						<span>指标名称：</span>
						<el-input v-model.trim="searchForm.name" placeholder="请输入指标名称" clearable class="ann_input" maxlength="50" />
					</div>
					<div slot="button">
						<el-button size="mini" @click="operate('reset')">重置</el-button>
						<el-button size="mini" type="primary" @click="operate('search')">搜索</el-button>
						<el-button v-if="!isCheckDialog" size="mini" type="primary" plain @click="operate('add')">添加</el-button>
					</div>
				</search-section>
				<!-- 列表信息 -->
				<div class="section main flex_1_auto flex_column shadow_border_normal">
					<el-table ref="tableRef" size="mini" :data="tableList" height="100%" stripe :row-style="{ height: '20px' }"
						:cell-style="{ padding: '0' }" border header-align="center" :header-cell-style="{
				          whiteSpace: 'nowrap',
				          fontSize: '12px',
				          color: '#333',
				          fontWeight: '700',
				          background: '#f5f5f5',
				        }" @header-dragend="$tableHeaderDragend(self, 'table')" @selection-change="handleSelectionChange">
						<el-table-column type="selection" v-if="isCheckDialog" :selectable="row => !row.selectDisable" width="40" />
						<el-table-column type="index" label="序号" width="60" align="center" show-overflow-tooltip fixed
							:index="getIndex" />
						<el-table-column prop="name" label="指标名称" align="center" show-overflow-tooltip width="160" />
						<el-table-column prop="indicatorGroupName" label="指标分组" align="center" show-overflow-tooltip width="160" />
						<el-table-column prop="remark" label="指标描述" header-align="center" show-overflow-tooltip />
						<el-table-column prop="standardRemark" label="考核标准" header-align="center" show-overflow-tooltip />
						<el-table-column prop="scoringRules" label="计分规则" header-align="center" show-overflow-tooltip />
						<el-table-column v-if="!isCheckDialog" label="操作" width="100" align="center" fixed="right">
							<template slot-scope="{row}">
								<i class="iconfont icon_warning icon-a-xiugai" title="修改" @click="operate('edit', row)" />
								<i class="iconfont icon_error icon-a-shanchu" title="删除" @click="operate('del', row)" />
							</template>
						</el-table-column>
					</el-table>
					<!-- 分页查询 -->
					<div class="paging">
						<el-pagination :current-page="searchForm.page" :page-sizes="$paginationSize" :page-size="searchForm.size"
							layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
							@current-change="handleCurrentChange" />
					</div>
				</div>

				<!-- 添加或编辑指标 -->
				<el-dialog :title="title == 'add' ? '添加指标配置' : '修改指标配置'" custom-class="my_dialog" :close-on-click-modal="false"
					:close-on-press-escape="false" :visible.sync="driverDialogVisible" width="450px" :before-close="handleClose">
					<div class="dialog-box">
						<el-row>
							<el-form ref="form" size="mini" :model="form" label-width="100px" label-position="right"
								label-suffix=" : " :rules="rules">
								<el-col :span="24">
									<el-form-item label="指标分组" prop="indicatorGroupSystemCode">
										<el-select v-model="form.indicatorGroupSystemCode" size="mini" value-key="kingdeeId" class="ann_input" clearable
											filterable placeholder="请选择指标分组">
											<el-option v-for="item in indicatorGroupList" :key="item.code" :label="item.indicatorGroupName"
												:value="item.code" />
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="指标名称" prop="name">
										<el-input v-model.trim="form.name" placeholder="请输入指标名称" clearable class="ann_input"
											maxlength="50" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="指标描述" prop="remark">
										<el-input v-model.trim="form.remark" type="textarea" placeholder="请输入指标描述" clearable
											class="ann_input" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="考核标准" prop="standardRemark">
										<el-input v-model.trim="form.standardRemark" type="textarea" placeholder="请输入考核标准" clearable
											class="ann_input" />
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="计分规则" prop="scoringRules">
										<el-input v-model.trim="form.scoringRules" type="textarea" placeholder="请输入计分规则" clearable
											class="ann_input" />
									</el-form-item>
								</el-col>
							</el-form>
						</el-row>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button size="mini" @click="handleClose">取 消</el-button>
						<el-button size="mini" type="primary" @click="dialogSure('form')">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>

	<!-- 指标库对应信息 -->
</template>
<script>
	export default {
		name:'indicatorLibrary',
		props: {
			// 是否是弹窗选择组件
			isCheckDialog: {
				type: Boolean,
				default: false
			},
			reserveSelection: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				activeIndex: 0, // 选中的下标
				indicatorGroupList: [], // 指标分组下拉框
				tableList: [], // 指标库列表
				searchForm: {
					current: 1,
					size: this.$defaultPage,
					indicatorGroupSystemCode: '', // 	指标分组编码
					name: '', // 指标名称
				},
				total: 0,
				title: '',
				driverDialogVisible: false, // 编辑弹窗
				form: {
					indicatorGroupSystemCode: '', //	指标分组系统编码
					name: '', //	指标名称
					remark: '', //	指标描述
				}, // 编辑数据
				rules: {
					indicatorGroupSystemCode: [{
						required: true,
						message: '请选择指标分组',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '请输入指标名称',
						trigger: 'blur'
					}],
					remark: [{
						required: true,
						message: '请输入指标描述',
						trigger: 'blur'
					}],
					standardRemark: [{
						required: true,
						message: '请输入考核标准',
						trigger: 'blur'
					}],
					scoringRules: [{
						required: true,
						message: '请输入计分规则',
						trigger: 'blur'
					}]
				}
			}
		},
		activated(){
			this.$nextTick(()=>{
				 this.$refs.tableRef.doLayout()
			})
		},
		async mounted() {
			await this.getIndicatorGroupList()
			// this.getData()
		},
		methods: {
			// 获取指标分组列表
			async getIndicatorGroupList() {
				let res = await this.$API.indicatorGroup.indicatorGroupList({flag:false})
				if (res.code == '0') {
					this.indicatorGroupList = res.responseBody || []
					if(this.indicatorGroupList.length>0){
						this.chenked(this.indicatorGroupList[0],0)
					}
				}
			},
			// 获取列表数据
			async getData() {
				let res = await this.$API.indicatorLibrary.reqPage(this.searchForm)
				let {
					code,
					responseBody
				} = res
				if (code == 0) {
					this.tableList = responseBody.records || []
					this.total = Number(responseBody.total)
					if(this.isCheckDialog){
						this.selectionDisable()		
					}				
				}else{
					this.$message.error(res.masg)
				}
			},
			// 点击选择策略
			chenked(item, index) {
				this.activeIndex = index
				this.searchForm.indicatorGroupSystemCode=item.code
				this.getData()
			},
			handleSelectionChange(val) {
				this.$emit('selectionChange',val)
			}, 
			// 删除
			async delete(item) {
				let res = await this.$API.indicatorLibrary.reqDelete(item.code)
				if (res && res.code == 0) {
					this.$message.success('操作成功！')
					this.getData()
				}else{
					this.$message.error(res.message)
				}
			},
			// 内部方法
			async operate(type, item) {
				switch (type) {
					case 'edit': // 编辑
						this.title = 'edit'
						this.form = this.$uDeepClone(item)
						this.driverDialogVisible = true
						break
					case 'add': // 添加
						this.title = 'add'
						this.driverDialogVisible = true
						break
					case 'reset':
						// 重置
						this.searchForm = this.$options.data.call(this).searchForm
						if(this.indicatorGroupList.length>0){
							this.chenked(this.indicatorGroupList[0],0)
							this.getData()
						}
						break
					case 'search':
						this.searchForm.current = 1
						this.getData()
						break
					case 'del':
						this.$confirm('是否确定删除？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: '',
							customClass: 'my_confirm'
						}).then(() => {
							this.delete(item)
						})
						break
				}
			},

			// 添加修改确认事件
			dialogSure(formName) {
				this.$refs[formName].validate(async valid => {
					if (valid) {
						let obj = this.$uDeepClone(this.form)
						let res = await this.$API.indicatorLibrary.reqCreate(obj)
						if (res.code == 0) {
							this.driverDialogVisible = false
							this.$message.success('操作成功！')
							this.getData()
							this.$refs.form.resetFields()
							this.form = this.$options.data.call(this).form
						}else{
							this.$message.error(res.masg)
						}
						
					}
				})
			},
			selectionDisable() {
			  this.$refs.tableRef.clearSelection()
			  this.tableList.map(item => {
					item.selectDisable=false
			    this.reserveSelection.some(i => {
			      if (item.code == i.indicatorLibraryCode) {
							item.selectDisable=true
							return true
			      }
			    })
			  })
				this.$forceUpdate()
			},
			// 取消按钮
			handleClose() {
				this.driverDialogVisible = false
				this.resetForm('form')
			},
			// 清空数据信息
			resetForm(formName) {
				this.$refs[formName].resetFields()
				this.form = this.$options.data.call(this).form
			},
			// 分页查询
			handleSizeChange(val) {
				this.searchForm.current = 1
				this.searchForm.size = val
				this.searchOne(this.searchForm)
			},
			handleCurrentChange(val) {
				this.searchForm.current = val
				this.searchOne(this.searchForm)
			},
			getIndex(index) {
				return (
					(this.searchForm.current - 1) * this.searchForm.size + index + 1
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		margin-bottom: 10px;

		::v-deep th {
			height: 20px;
			padding: 1px;
		}
	}

	.dialog-box {
		padding: 10px;
		margin-top: 20px;
	}

	.ann_input {
		width: 300px;
	}

	// .group_box{
	// 	background-color: #f3f3f3;
	// 	border-radius: 4px;
	// 	margin: 5px;
	// 	padding: 6px 10px;
	// }
	.group_box {
		height: 100%;
		overflow: auto;
		margin-right: 0;

		.list_l {
			border-radius: 5px;
			display: flex;
			justify-content: space-between;
			background: #f2f2f2;
			padding: 8px 10px;
			margin: 5px 0;
			cursor: pointer;
		}

		.choice {
			background: #0076f6;
			color: #fff;
		}
	}
</style>